<template>
  <div>
    <BasicTable @register="registerTable" @edit-change="handleEditChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction :actions="createActions(record)" />
        </template>
      </template>
    </BasicTable>
    <a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增 </a-button>
  </div>
</template>
<script lang="ts" setup>
  import {ref, watch} from 'vue'
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    ActionItem,
    EditRecordRow,
  } from '@/components/Table';

  const props = defineProps(['data', 'standardModelFieldOptions']);

  const propsData = ref(props.data);
  const propsStandardModelFieldOptions = ref(props.standardModelFieldOptions);

  const columns: BasicColumn[] = [
    {
      title: '属性',
      dataIndex: 'field',
      editRow: true,
      align: 'left',
    },
    {
      title: '描述',
      dataIndex: 'label',
      editRow: true,
      align: 'left',
    },
    {
      title: '表字段',
      dataIndex: 'source_field',
      editRow: true,
      align: 'left',
    },
    {
      title: '标准模型字段',
      dataIndex: 'standard_model_field',
      editRow: true,
      align: 'left',
      editComponent: 'Select',
      editComponentProps: {
        options: propsStandardModelFieldOptions,
      },
    },
  ];

  const [registerTable, { getDataSource }] = useTable({
    columns: columns,
    showIndexColumn: false,
    dataSource: propsData,
    actionColumn: {
      width: 160,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
    scroll: { y: '100%' },
    pagination: false,
  });

  function handleEdit(record: EditRecordRow) {
    record.onEdit?.(true);
  }

  function handleCancel(record: EditRecordRow) {
    record.onEdit?.(false);
    if (record.isNew) {
      const data = getDataSource();
      const index = data.findIndex((item) => item.key === record.key);
      data.splice(index, 1);
    }
  }

  function handleSave(record: EditRecordRow) {
    record.onEdit?.(false, true);
  }

  function handleEditChange(data: Recordable) {
    console.log(data);
  }

  function handleAdd() {
    const data = getDataSource();
    const addRow: EditRecordRow = {
      field: '',
      label: '',
    };
    data.push(addRow);
  }

  function handleDelete(record: EditRecordRow) {
    const data = getDataSource();
    const index = data.findIndex((item) => item.field === record.field);
    data.splice(index, 1);
  }

  function createActions(record: EditRecordRow): ActionItem[] {
    if (!record.editable) {
      return [
        {
          label: '编辑',
          onClick: handleEdit.bind(null, record),
        },
        {
          label: '删除',
          color: 'error',
          onClick: handleDelete.bind(null, record),
        },
      ];
    }
    return [
      {
        label: '保存',
        onClick: handleSave.bind(null, record),
      },
      {
        label: '取消',
        onClick: handleCancel.bind(null, record),
      },
    ];
  }

  watch(() => props.data, (newOptions, oldOptions) => {
    console.log('ssssssss');
    propsData.value = props.data;
  });

  watch(() => props.standardModelFieldOptions, (newOptions, oldOptions) => {
    propsStandardModelFieldOptions.value = props.standardModelFieldOptions;
  });

  defineExpose({
    getDataSource,
  })

</script>
